<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版微信助手</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/vue@3.5.13.js"></script>
</head>

<body>
    <div id="app">
        <!-- 未登录区域 -->
        <div class="wx-container">
            <h1>使用文件传输助手，手机电脑轻松互传文件。</h1>
            <!-- 按钮登录 -->
            <div class="box">
                <img class="change-btn" src="assets/二维码登录.png" alt="">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <button class="wx-login">点击登录</button>
                    <p>使用鼠标点击登录传输文件</p>
                </div>
            </div>

            <!-- 二维码登录 -->
            <div class="box">
                <img class="change-btn" src="assets/账号登录.png" alt="">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <img class="code-img" src="assets/code.png" alt="">
                    <p>使用手机微信扫码传输文件</p>
                </div>
            </div>
        </div>

        <!-- 已登录区域 -->
        <div class="wx-chat-box">
            <!-- 聊天头部区域 -->
            <div class="chat-header-main">
                <div>张三的文件传输助手（男）</div>
                <div class="chat-del">
                    <span class="del">X</span>
                </div>
            </div>

            <!-- 聊天内容区域 -->
            <div class="chat-main-box">
                <div class="chat-main-info">你可以使用「手机微信>文件传输助手」与电脑互传文件</div>
                <div class="chat-main-messages">
                    <div class="message-box">
                        <p class="message">Hello Html</p>
                        <img class="header"
                            src="https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000?t=1713407369894"
                            alt="" />
                    </div>
                    <div class="message-box">
                        <p class="message">Hello JavaScript</p>
                        <img class="header"
                            src="https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000?t=1713407369894"
                            alt="" />
                    </div>
                    <div class="message-box">
                        <p class="message">Hello Vue</p>
                        <img class="header"
                            src="https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000?t=1713407369894"
                            alt="" />
                    </div>
                </div>
            </div>

            <!-- 聊天输入框区域 -->
            <div class="chat-input-box">
                <textarea class="textarea" name="" id="" cols="30" rows="8"></textarea>
                <div>
                    <button class="chat-send">发送</button>
                </div>
            </div>
        </div>
    </div>

    <!-- vue -->
    <script>
        const { createApp, ref } = Vue
        // 创建 Vue
        createApp({
            setup() {
                // 定义用户数据
                const userInfo = ref({
                    name: '张三',
                    gender:0,   // 0：男，1：女
                    headerImg: 'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000',
                    chatList: [
                        { id: "1", content: "Hello Html" },
                        { id: "2", content: "Hello JavaScript" },
                        { id: "3", content: "Hello Vue" },
                    ]
                })

                // 编写逻辑代码


                // 返回值
                return {
                    userInfo
                }
            }
        }).mount('#app')
    </script>
</body>

</html>